<template>
  <div>
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="120px" class="dataForm" style="margin-left: 30px;">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('产品编码')" prop="code">
            <el-input v-model="form.code" :placeholder="$t('产品编码')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('产品名称')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('产品名称')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('管理人编码')" prop="managerCode">
            <el-input v-model="form.managerCode" :placeholder="$t('管理人编码')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('管理人名称')" prop="managerName">
            <el-input v-model="form.managerName" :placeholder="$t('管理人名称')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('组织形式')" prop="organizationalForm">
            <el-input v-model="form.organizationalForm" :placeholder="$t('组织形式')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('私募基金成立日期')" prop="fundEstablishedDate">
            <el-date-picker
              v-model="form.fundEstablishedDate"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('私募基金成立日期')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('私募基金到期日期')" prop="fundExpirationDate">
            <el-date-picker
              v-model="form.fundExpirationDate"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('私募基金到期日期')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('存续期限')" prop="duration">
            <el-input v-model="form.duration" :placeholder="$t('存续期限')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn v-if="!btnHide && processBtn" :cancel-show="cancelShow" has-permi="fund:monitor" />
    </div>
  </div>
</template>

<script>
    import { saveFundProductInfo, getByMonitorId, getDefaultData } from '@/api/fund/operation/fundProductInfo'
    export default {
        data() {
            return {
                // 表单参数
                form: {},
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {},
                processBtn: true,
                // 取消按钮是否展示
                cancelShow: true,
                btnHide: false
            }
        },
        created() {
        },
        methods: {
            // 初始化数据
            init(data) {
                console.log('加载产品信息表')
                this.loading = true
                this.processBtn = data.processBtn
                this.cancelShow = data.cancelShow
                this.btnHide = data.btnHide
                if (data.id !== undefined) {
                    getByMonitorId(data.id).then(response => {
                      if (response.data) {
                        this.form = response.data
                      } else {
                        getDefaultData(data.fundId).then(response => {
                          this.reset()
                          this.form = response.data
                          this.form.monitorId = data.id
                        })
                      }
                      this.loading = false
                    })
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    monitorId: undefined,
                    code: undefined,
                    name: undefined,
                    managerCode: undefined,
                    managerName: undefined,
                    organizationalForm: undefined,
                    fundEstablishedDate: undefined,
                    fundExpirationDate: undefined,
                    duration: undefined
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                if (this.$parent.$parent.$parent.$parent.indicatorFormOpen !== undefined) {
                  this.$parent.$parent.$parent.$parent.indicatorFormOpen = false
                }
                if (this.$parent.$parent.$parent.indicatorFormOpen !== undefined) {
                  this.$parent.$parent.$parent.indicatorFormOpen = false
                }
                this.$emit('cancel', undefined)
            },
            // 关闭form页面
            closeForm() {
              // 关闭form页面遮罩层
              this.loading = false
              // 关闭form页面
              if (this.$parent.$parent.$parent.$parent.indicatorFormOpen !== undefined) {
                this.$parent.$parent.$parent.$parent.indicatorFormOpen = false
              }
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveFundProductInfo(this.form).then(response => {
                            if (response.code === 200) {
                                this.form.id = response.data.id
                                this.msgSuccess(this.$t('保存成功'))
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           }

        }

    }
</script>
